import React, { useReducer, useEffect } from "react";
import "./Mine.css";

import { initState, reducer, actions } from "./mine";
import { reqBanner} from "../../request/api";
import { Carousel, WingBlank } from 'antd-mobile';
const Mine = (props) => {
  const [state, dispatch] = useReducer(reducer, initState);
  let { banner } = state;
  //进来页面
  useEffect(() => {
    reqBanner().then((res) => {
        if(res.data.code===200){
             //存信息
          dispatch(actions.changeBanner(res.data.list))
        }
    });
    
}, []);


return (
    <div className="Mine_banner">
    <WingBlank>
  <Carousel
    autoplay={false}
    infinite
    beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
    afterChange={index => console.log('slide to', index)}
  >
    {banner?banner.map(val => (
      <a
        key={val}
        href="http://www.alipay.com"
        style={{ display: 'inline-block', width: '100%', height: '100px', }}
      >
        <img
        key={val.id}
          src={val.img}
          alt=""
          style={{ width: '100%', verticalAlign: 'top' }}
          onLoad={() => {
            // fire window resize event to change height
            window.dispatchEvent(new Event('resize'));
            
          }}
        />
      </a>
    )):null}
  </Carousel>
</WingBlank>
</div>
)
  }



export default Mine;

